<template>
  <div class="bg-white rounded-2xl shadow p-6">
    <div class="flex items-center gap-2 mb-4">
      <span class="text-lg font-bold">专家标签</span>
      <span class="text-xs text-blue-400 bg-blue-50 rounded px-2 py-0.5 ml-2">热门</span>
    </div>
    <div class="flex flex-wrap gap-2 mb-4">
      <el-tag
        v-for="tag in tags.slice(0, 6)"
        :key="tag.name"
        :type="activeTag === tag.name ? 'success' : tagColor(tag.name)"
        size="small"
        class="border font-medium cursor-pointer hover:scale-110 hover:bg-blue-50 hover:text-blue-600 transition-all duration-150 flex items-center"
        :effect="activeTag === tag.name ? 'dark' : 'light'"
        @click="$emit('select', { name: tag.name, id: tag.id })">
        <!-- <span v-if="tags.indexOf(tag) < 6" class="mr-1">🔥</span> -->
        <img  v-if="tags.indexOf(tag) < 6" :src="hot" alt="hot" class="w-4 h-4 inline-block"> {{ tag.name }} <span :class="['ml-1 text-xs', activeTag === tag.name ? 'text-white' : 'text-slate-400']">({{ tag.count }})</span>
      </el-tag>
    </div>
    <div class="flex flex-wrap gap-2 mb-2">
      <el-tag
        v-for="tag in tags.slice(6)"
        :key="tag.name"
        :type="activeTag === tag.name ? 'success' : tagColor(tag.name)"
        size="small"
        class="border font-medium cursor-pointer hover:scale-110 hover:bg-blue-50 hover:text-blue-600 transition-all duration-150"
        :effect="activeTag === tag.name ? 'dark' : 'light'"
        @click="$emit('select', { name: tag.name, id: tag.id })">
        {{ tag.name }} <span :class="['ml-1 text-xs', activeTag === tag.name ? 'text-white' : 'text-slate-400']">({{ tag.count }})</span>
      </el-tag>
    </div>
    <el-button v-if="activeTag" size="small" type="info" class="mt-2 w-full" @click="$emit('select', { name: '', id: '' })">重置筛选</el-button>
  </div>
</template>
<script setup>
import hot from '@/assets/hot.png'
const props = defineProps({
  tags: Array,
  activeTag: String,
  tagColor: Function,
})
console.log(props.tags);

</script> 